// import React ,{ useState } from "react";

// //2引入axios
// import axios from 'axios'

// //4.发布订阅信息
// import PubSub from "pubsub-js";

// export default function Header() {

//     // 发送请求,在input中输入内容,input框状态改变.最后点击button后发送请求
//     // 1.给input定义value属性,以及onChange事件
//     const [search, setSearch] = useState('')  //state初始状态为空,也就是input初始为空

//     const changeSearchHandle = (e) => {
//         setSearch(e.target.value)
//     }

//     //2.点击button绑定点击事件,点击后发送请求,引入axios
//     const searchHandle = async () => {
//         // axios发送的get请求,q的值就是search.   
//         // axios.get("https://api.github.com/search/users?q=" + search)
//         const result = await axios.get("https://api.github.com/search/users?q=" + search);
//         //3. ajax请求需要用到async 和await
//         //这里result就是我们请求到的数据,我们需要将数据传给List进行一个展示.兄弟之间传值,可以使用PubSub.publish,去List中去操作
//         //4.发布订阅信息
//         PubSub.publish('github',result)
//     }
//     return (
//         <section className="jumbotron">
//             <h3 className="jumbotron-heading">Search Github Users</h3>
//             <div>
//                 <input type="text" value={search} onChange={changeSearchHandle} placeholder="enter the name you search" />
//                 &nbsp;
//                 <button onClick={searchHandle}>Search</button>
//             </div>
//         </section>
//     )
// }


import React, { useState } from 'react'
import axios from 'axios';
import PubSub from 'pubsub-js';

export default function Header() {
    const [search, setSearch] = useState("")

    const changeSearchHandle = (e) => {
        setSearch(e.target.value);
    }

    const searchHandle = async () => {
        //1.在点击搜索之后,发送请求之前,提示你已经在搜索了,初始化为false,点击为true
        PubSub.publish("github", { isInit: false, isSearch: true, data: [] })

        const result = await axios.get("https://api.github.com/search/users?q=" + search);
        // console.log(result);
        // PubSub.publish("github", result)
        // 2.搜索结束后的状态
        PubSub.publish("github", { isInit: false, isSearch: false, data: result.data.items })
    }
    return (
        <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
                <input type="text" value={search} onChange={changeSearchHandle} placeholder="enter the name you search" />
                &nbsp;
                <button onClick={searchHandle}>Search</button>
            </div>
        </section>
    )
}
